<template>
  <div class="listInfo flex1" v-show="Object.keys(singerInfo).length">
    <img class="avatar" :src="`${singerInfo.cover}?param=300y300`" alt />
    <div class="right">
      <div class="titleContent txt1">{{singerInfo.name}}</div>
      <div class="btns flex1">
        <div class="btnItem flex3" @click="subSinger" :class="{'red':isSub} ">
          <i class="iconfont icon-xihuan"></i>
          &nbsp;
          {{isSub?'已收藏':"收藏"}}
        </div>
        <div class="btnItem flex3">
          <i class="iconfont icon-link"></i>个人主页
        </div>
      </div>
      <div class="otherInfo flex2">
        <div class="musicNum">单曲数:{{singerInfo.musicSize}}</div>
        <div class="musicNum">专辑数:{{singerInfo.albumSize}}</div>
        <div class="musicNum">mv数:{{singerInfo.mvSize}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "listInfo",
  props: {
    singerInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      id: ""
    };
  },
  computed: {
    subSingerList() {
      return this.$store.state.subSingerList;
    },
    isSub() {
      const item = this.subSingerList.some(v => v.id == this.id);
      console.log(item, "cuputed");
      return item;
    }
  },
  created() {
    this.id = this.$route.params.id;
    const state = this.$store.state;
    if (state.isLogin) {
      if (state.subSingerList.length === 0) {
        console.log("len first");
        this.$store.commit("updateSubSingerLen");
      }
    }
  },
  methods: {
    // 点击subSinger按钮的回调
    async subSinger() {
      if (!this.$store.state.isLogin) {
        this.$message.error("请先登录!");
        return;
      }

      // 发送请求
      const res = await this.$request("/artist/sub", {
        id: this.id,
        t: !this.isSub ? 1 : 0
      });
      if (res.data.code === 200) {
        // 每次进行修改操作后，都需要更新vuex里面的收藏list
        this.$store.commit("updateSubSingerLen");
      }
    }
  }
};
</script>

<style scoped  >
.listInfo {
  padding: 25px 10px;
}
.red {
  color: var(--red);
}
.avatar {
  margin-right: 15px;
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.right {
  flex: 1;
  overflow: hidden;
}
.titleContent {
  font-size: 20px;
  font-weight: 600;
  color: #373737;
}
.btns {
  margin-top: 10px;
}
.btnItem {
  padding: 8px 15px;
  margin-right: 5px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
}
.btnItem i {
  margin-right: 3px;
}
.otherInfo {
  margin-top: 15px;
  font-size: 12px;
}
.musicNum {
  margin-right: 13px;
}
</style>
